import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input,Select, InputNumber, Radio, Modal, Cascader } from 'antd'
import style from './detail/index.less'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    setFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      console.log(data,90900)
      onOk(data)
    })
  }
  const {productId}=modalProps
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const {productList}=modalProps
  const children = [];
  const suiteChange=(value)=>{
    setFieldsValue({'suite_names':[]})
    //suiteChangeFn(value)
  }
  for (let i = 0; i < productList.length; i++) {
    children.push(<Option key={productList[i].pk}>{productList[i].fields.name}</Option>);
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="Name" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.fields?item.fields.name:item.name,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="pk" hasFeedback {...formItemLayout} className={style.hiddentype}>
          {getFieldDecorator('pk', {
            initialValue: item.pk,
          })(<Input disabled/>)}
        </FormItem>
        
        <FormItem label="产品" hasFeedback {...formItemLayout}>
          {getFieldDecorator('product_name_id', {
            initialValue: item.fields?String(item.fields.product_name):item.product_name_id,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }} onChange={suiteChange} >
            {children}
          </Select>)}
        </FormItem>
        
        {/*<FormItem label="Gender" hasFeedback {...formItemLayout}>*/}
          {/*{getFieldDecorator('isMale', {*/}
            {/*initialValue: item.isMale,*/}
            {/*rules: [*/}
              {/*{*/}
                {/*required: true,*/}
                {/*type: 'boolean',*/}
              {/*},*/}
            {/*],*/}
          {/*})(*/}
            {/*<Radio.Group>*/}
              {/*<Radio value>Male</Radio>*/}
              {/*<Radio value={false}>Female</Radio>*/}
            {/*</Radio.Group>*/}
          {/*)}*/}
        {/*</FormItem>*/}
        {/*<FormItem label="Age" hasFeedback {...formItemLayout}>*/}
          {/*{getFieldDecorator('age', {*/}
            {/*initialValue: item.age,*/}
            {/*rules: [*/}
              {/*{*/}
                {/*required: true,*/}
                {/*type: 'number',*/}
              {/*},*/}
            {/*],*/}
          {/*})(<InputNumber min={18} max={100} />)}*/}
        {/*</FormItem>*/}
        {/*<FormItem label="Phone" hasFeedback {...formItemLayout}>*/}
          {/*{getFieldDecorator('phone', {*/}
            {/*initialValue: item.phone,*/}
            {/*rules: [*/}
              {/*{*/}
                {/*required: true,*/}
                {/*pattern: /^1[34578]\d{9}$/,*/}
                {/*message: 'The input is not valid phone!',*/}
              {/*},*/}
            {/*],*/}
          {/*})(<Input />)}*/}
        {/*</FormItem>*/}
        {/*<FormItem label="E-mail" hasFeedback {...formItemLayout}>*/}
          {/*{getFieldDecorator('email', {*/}
            {/*initialValue: item.email,*/}
            {/*rules: [*/}
              {/*{*/}
                {/*required: true,*/}
                {/*pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,*/}
                {/*message: 'The input is not valid E-mail!',*/}
              {/*},*/}
            {/*],*/}
          {/*})(<Input />)}*/}
        {/*</FormItem>*/}
        {/*<FormItem label="Address" hasFeedback {...formItemLayout}>*/}
          {/*{getFieldDecorator('address', {*/}
            {/*initialValue: item.address && item.address.split(' '),*/}
            {/*rules: [*/}
              {/*{*/}
                {/*required: true,*/}
              {/*},*/}
            {/*],*/}
          {/*})(<Cascader*/}
            {/*size="large"*/}
            {/*style={{ width: '100%' }}*/}
            {/*options={city}*/}
            {/*placeholder="Pick an address"*/}
          {/*/>)}*/}
        {/*</FormItem>*/}
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
